<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="format-detection" content="telephone=no" />
    <script type="text/javascript" src="http://${staticHost}/js/jquery.js"></script>
    <title>商品详情</title>
    <style type="text/css">
        html {
            font-size: 62.5%;
            color: #5f5f5f;
        }
        .section_top {}
        .section_top ul {
            list-style: none;
            padding: 0;
            font-size: 0;
            border-bottom: .1rem solid #e4e4e4;
        }

        .section_top ul li {
            display: inline-block;
            width: 25%;
            height: 3rem;
            line-height: 3rem;
            font-size: 1.4rem;
            text-align: center;
        }

        .section_container {}

        .section_container ul {
            padding: 0;
            list-style: none;
        }

        .section_container ul li {
            padding: .3rem;
            margin-top: 1rem;
        }

        .section_container ul li > span {
            display: block;
        }

        .section_container ul .image {
            height: 200px;
        }

        .section_container ul .image img {
            height: 200px;
            display: block;
            width: auto !important;
            margin: 0 auto;
        }

        .section_container ul .money {
            color: #f44336;
            font-size: 16px;
        }

        .section_container ul .hint {
            color: #5f5f5f;
            font-size: 10px;
        }

        .section_container ul .description {
            color: #666;
            font-weight: bold;
            font-size: 11px;
        }

        .section_container ul .btn_li {
            margin-top: 20px;
            text-align: center;
        }

        .global-button {
            border: 0;
            border-radius: .2rem;
            color: #fff;
            height: 3.5rem;
            line-height: 3.5rem;
            padding: 0 2.5rem;
            background: #53b5f4;
        }

        .section_shadow {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: .6;
            top: 0;
            left: 0;
            z-index: 20;
            display: none;
        }

        .section_confirm_pay {
            position: fixed;
            display: none;
            width: 100%;
            height: 60%;
            bottom: 0;
            left: 0;
            z-index: 21;
            background: #fff;
            text-align: center;
        }

        .section_confirm_pay .title {
            display: inline-block;
            height: 7rem;
            padding-left: 2rem;
            line-height: 7rem;
            font-size: 1.6rem;
        }

        .section_confirm_pay .help {
            margin-top: 2.5rem;
            display: inline-block;
            float: right;
            color: #53b5f4;
            height: 3rem;
            width: 3rem;
        }

        .section_confirm_pay .pay_top {
            border-bottom: .1rem solid #e4e4e4;
            text-align: center;
        }

        .confirm_pay_content {
            margin: 3rem 2rem;
            text-align: center;
        }

        .confirm_pay_content > .icon {
            display: inline-block;
            width: 3rem;
            height: 3rem;
        }

        .confirm_pay_content > .amount {
            font-size: 2rem;
        }

        .order_info {
            margin: 2rem;
        }

        .order_info > ul {
            list-style: none;
            /*width: 100%;*/
            margin: 0;
            padding: 0;
            font-size: 1.2rem;
        }

        .order_info > ul > li {
            display: block;
            height: 3.5rem;
            line-height: 3.5rem;
            color: #666;
            text-align: left;
            border-bottom: .1rem solid #e4e4e4;
        }

        .order_info > ul > li > span {
            display: block;
            float: right;
            height: 3.5rem;
            line-height: 3.5rem;
        }

        .order_info .submit_btn {
            text-align: center;
        }

        .submit_section > input[type=button] {
            width: 80%;
        }
    </style>
</head>

<body>
<section class="section_top">
    <ul>
        <li>商品详情</li>
    </ul>
</section>
<section class="section_container">
    <ul>
        <li class="image">
            <img src="">
        </li>
        <li class="money">￥35</li>
        <li class="hint">海量好书集结！立即抢购，畅销书满100减30，满200减60，满300减100！</li>
        <li class="description">
            月亮与六便士（新版！未删节插图珍藏版，荣获波比小说诗人译本，夺得2017豆瓣图书桂冠）
        </li>
        <li id="author">作者：【英】毛姆</li>
        <li id="publishing">出版社：浙江文艺出版社</li>
        <li class="btn_li">
            <input type="button" class="global-button" id="but_btn" value="购  买">
        </li>
    </ul>
</section>
<section class="section_shadow"></section>
<section class="section_confirm_pay">
    <section class="global_top pay_top">
        <span style="display:block;float:right;font-size: 16px;margin:20px;" id="back_confirm">X</span>
        <span class="title">确认付款</span>
        <span class="glyphicon glyphicon-question-sign help" id="pay_help"></span>
    </section>
    <section class="confirm_pay_content">
        <span class="glyphicon glyphicon-yen icon"></span>
        <span class="amount" id="amount_span"></span>
    </section>
    <section class="global-section cz-zfb-select" style="margin-bottom: 10px;">
        <span><img src="http://${staticHost}/images/alipay_g2.png"></span>
        <span style="padding-left: 1rem;padding-right: 1rem;padding-bottom: 1.5rem;">支付宝支付</span><input type="checkbox" name="resume" id="zfbSelectChk" value="all" checked="checked"/><label for="zfbSelectChk"></label>
    </section>
    <section class="submit_section">
        <input class="global-button" type="button" id="confirm_btn" value="立即付款" />
    </section>
    <section id="pay_submit_call_back"></section>
</section>
</body>
<script>
    $(function() {
        // var id = 1;
        var id=GetQueryString("id");

        $.each(jsop_data.data, function(n, value) {
            if (id == value.id) {
                $(".image").find("img").attr("src", value.image);
                $(".money").html(value.money);
                $(".description").html(value.description);
                $("#author").html(value.author);
                $("#publishing").html(value.publishing);
                $("#amount_span").html(value.money);

            }
        });
        $("#but_btn").click(function() {
            $(".section_shadow").slideDown();
            $(".section_confirm_pay").slideDown();
        });
        $("#back_confirm").click(function() {
            $(".section_shadow").slideUp();
            $(".section_confirm_pay").slideUp();
        });
    });

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }
    var jsop_data = {
        "data": [{
            id: "1",
            "name": "人间失格",
            "description": "",
            "author": "【日】太宰治",
            "money": "￥22.1",
            "image": "http://${staticHost}/images/product1.jpg",
            "publishing": "武汉出版社"
        }, {
            id: "2",
            "name": "月亮与六便士",
            "description": "文学名著：月亮与六便士（毛姆代表作，导读注释精装典藏版）",
            "author": "【英】毛姆",
            "money": "￥32.1",
            "image": "http://${staticHost}/images/product2.jpg",
            "publishing ": "天津人民出版社"
        }, {
            id: "3",
            "name": "摆渡人",
            "description": "金融博物馆书院倾情推荐！或许，命运就是一条孤独的河流，我们都会遇见灵魂的摆渡人。",
            "author": "【英】克莱尔",
            "money": "￥20.3",
            "image": "http://${staticHost}/images/product3.jpg",
            "publishing ": "百花洲文艺出版社"
        }, {
            id: "4",
            "name": "岛上书店",
            "description": "岛上书店（每个人的生命中，都有无比艰难的那一年，将人生变得美好而辽阔）。",
            "author": "【美】加泽文",
            "money": "￥19.6",
            "image": "http://${staticHost}/images/product4.jpg",
            "publishing ": "江苏凤凰文艺出版社"
        }, {
            id: "5",
            "name": "教父",
            "description": "教父三部曲典藏版（套装共三册）。",
            "author": "马里奥-普佐",
            "money": "￥96.6",
            "image": "http://${staticHost}/images/product5.jpg",
            "publishing ": "江苏文艺出版社"
        }, {
            id: "6",
            "name": "百年孤独",
            "description": "50周年纪念版！全新典藏内封。马尔克斯代表作，全球正式授权中文版，未作任何删减！",
            "author": "加西亚-马尔克斯",
            "money": "￥55.00",
            "image": "http://${staticHost}/images/product6.jpg",
            "publishing ": "南海出版社"
        }]
    };
</script>

</html>
